<template>
    <div class="input-card" style="width:8rem">
        <div class="card-header" @click="onShow">
            <el-text>样式</el-text>
        </div>
        <div class="card-content" v-show="isShow">
            <el-radio-group v-model="radio" @change="onChange">
                <el-row v-for="style in mapStyle">
                    <el-col :span="12"><el-radio :value="style.value" size="small">{{style.name}}</el-radio></el-col>
                    <el-col :span="12">{{style.type}}</el-col>
                </el-row>
            </el-radio-group>
        </div>
    </div>
</template>

<script setup>
import {ref} from "vue"
import amapConfig from "@/mapConfig";
const mapStyle = amapConfig.map_style
const radio = ref("amap://styles/normal")
const isShow = ref(true)
const emit = defineEmits(['selectMapStyle'])

function onChange(e){
    emit('selectMapStyle', {style:e })
}

function onShow(){
    isShow.value = !isShow.value
}

</script>

<style>
.input-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: 8px;
    width: 240px;
    border-width: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    padding: 0;
    overflow: hidden;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.card-header {
    width: 100%;
    height: 40px;
    background-color: #1e88e5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    font-weight: 600;
    font-size: 16px;
    transition: background-color 0.3s;
}

.card-header:hover {
    background-color: #1976d2;
}

.card-content {
    padding: 16px;
    max-height: 300px;
    overflow-y: auto;
}

</style>
